<template>


    <div style="height: 100%">
        <div class="title">基本详情</div>
        <el-row>
            <el-col :span="4">
                <div class="info"><span class="label">工单编号</span>{{ orders[idx].orderId }}</div>
                <div class="info"><span class="label">产品规格</span>{{ orders[idx].productSpecification }}</div>
                <div class="info"><span class="label">客户</span>{{ orders[idx].customerName }}</div>
                <div class="info"><span class="label">制作人</span>{{ orders[idx].employeeName }}</div>
                <div class="info"><span class="label">上传图纸</span>{{ orders[idx].drawingUrl }}</div>
            </el-col>
            <el-col :span="4">

            </el-col>
            <el-col :span="4">
                <div class="info"><span class="label">紧急加单</span>{{ orders[idx].idUrgent ==='0'? '不加急':'加急' }}</div>
                <div class="info"><span class="label">交货日期</span>{{ orders[idx].deliveryDate }}</div>
                <div class="info"><span class="label">生产订单</span>{{ orders[idx].productionOrderId }}</div>
                <div class="info"><span class="label">备注</span>{{ orders[idx].remarks }}</div>
            </el-col>
            <el-col :span="2">

            </el-col>
            <el-col :span="8">
                <el-table :data="bomTable" height="200">
                    <el-table-column prop="matId" label="物料编码"></el-table-column>
                    <el-table-column prop="name" label="物料名称"></el-table-column>
                    <el-table-column prop="model" label="规格"></el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                    <el-table-column prop="prop" label="使用比例"></el-table-column>

                    <el-table-column label="操作">
                        <template #default="scope">
                            <div style="display: flex;justify-items: center">
                                <bar-icon @click="handleSelectedBOMChanged(scope.row)" style="cursor:pointer;" :icon="'edit'" :color="'#3475fe'" :width="15" :height="15"/>
                                <bar-icon @click="handleDeleteBOM(scope.row)" style="margin-left: 10px;cursor:pointer;" :icon="'delete'" :color="'#ff4747'" :width="15" :height="15"/>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="2">
                <el-button @click="handleRefresh">刷新</el-button>
            </el-col>
        </el-row>
<!--        <div class="title">工单详情</div>-->
<!--        <el-row>-->
<!--            <el-col :span="4">-->
<!--                <div class="info"><span class="label">工单状态</span>{{ plans[idx].orderStatus === '1'? '生产中':'已完成' }}</div>-->
<!--                <div class="info"><span class="label">当前计划完成</span>{{ plans[idx].completionQuantity/plans[idx].plannedQuantity*100}}%</div>-->
<!--                &lt;!&ndash;                <div class="info"><span class="label">生产部门</span>&ndash;&gt;-->
<!--                &lt;!&ndash;                    <div style="display: flex;justify-items: center">&ndash;&gt;-->
<!--                &lt;!&ndash;                        <div style="margin-right: 10px;margin-left: 10px">部门1</div>&ndash;&gt;-->
<!--                &lt;!&ndash;                        <div style="margin-right: 10px;margin-left: 10px">部门2</div>&ndash;&gt;-->
<!--                &lt;!&ndash;                        <div style="margin-right: 10px;margin-left: 10px">部门3</div>&ndash;&gt;-->
<!--                &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                </div>&ndash;&gt;-->

<!--            </el-col>-->
<!--            <el-col :span="4">-->

<!--            </el-col>-->
<!--            <el-col :span="4">-->
<!--                <div class="info"><span class="label">计划时间</span>{{ plans[idx].plannedDate}}</div>-->
<!--                <div class="info"><span class="label">完成数量</span>{{ plans[idx].plannedQuantity}}</div>-->
<!--            </el-col>-->
<!--            <el-col :span="4">-->

<!--            </el-col>-->
<!--            <el-col :span="4">-->
<!--                <div class="info"><span class="label">实际时间</span>{{ plans[idx].completionDate}}</div>-->
<!--                <div class="info"><span class="label">入库数量</span>{{ plans[idx].completionQuantity}}</div>-->
<!--            </el-col>-->
<!--        </el-row>-->
    </div>
</template>
<script>
import BarIcon from "../../../components/widget/icon/BarIcon.vue";
import mdAPI from "@/util/request-md/mat-pro/mat-pro.js";
import MakeBOMDialog from "@/components/widget/dialog/MakeBOMDialog.vue";
import bomAPI from "@/util/request-md/bom/bom.js"
export default {
    emits:['bomSelected'],
    props:['orders','bom','plans','idx','refresh'],
    components:{
        BarIcon,
        MakeBOMDialog,
    },
    watch:{
        orders(newVal,oldVal){
            console.log(this.orders[this.idx].orderId,">>>拿到了订单ID");

        },
        'refresh'(val){
            bomAPI.deleteBom({orderId:this.orders[this.idx].orderId},((res) => {
                if (res.code === 200) {
                    bomAPI.getOrderBom({orderId:this.orders[this.idx].orderId},((res) => {
                        if (res.code === 200) {
                            this.bomTable = res.data;
                        } else {
                            this.$message.error("网络不佳，请稍后再试");
                        }
                    }))
                }
            }))
        }
    },
    data() {

        return {
            makeBomDialogVisible:false,
            bomTable: []
        }
    },
    methods:{
        handleSelectedBOMChanged(data){
            this.$emit('bomSelected',data,this.idx)
        },
        handleDeleteBOM(data){
            //判断是否真的要删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param ={matId:data.matId,orderId:this.orders[this.idx].orderId,productId:this.orders[this.idx].idProduct};
                //删除
                bomAPI.deleteBom(param,((res) => {
                    if (res.code === 200) {
                        this.$message.success("删除成功");
                        //刷新数据
                        bomAPI.getOrderBom({orderId:this.orders[this.idx].orderId},((res) => {
                            if (res.code === 200) {
                                this.bomTable = res.data;
                                console.log(this.bomTable,">>>>>拿到了BOM数据");
                            } else {
                                this.$message.error("网络不佳，请稍后再试");
                            }
                        }))
                    }
                }))
            })
        },
        handleRefresh(){
            bomAPI.deleteBom({orderId:this.orders[this.idx].orderId},((res) => {
                if (res.code === 200) {
                    bomAPI.getOrderBom({orderId:this.orders[this.idx].orderId},((res) => {
                        if (res.code === 200) {
                            this.bomTable = res.data;
                        } else {
                            this.$message.error("网络不佳，请稍后再试");
                        }
                    }))
                }
            }))
        }
    },
    mounted() {
        // 延时加载
        // setTimeout(()=>{
        //     //在这里延时1秒
        //     console.log("延时加载");
        //     //判断this.orders[this.idx].orderId是否是纯数字
        //     bomAPI.getOrderBom({orderId:this.orders[this.idx].orderId},((res) => {
        //         if (res.code === 200) {
        //             this.bomTable = res.data;
        //             console.log(this.bomTable,">>>>>拿到了BOM数据");
        //         } else {
        //             this.$message.error("网络不佳，请稍后再试");
        //         }
        //     }))
        //     //延时结束之后刷新数据
        //     // this.$forceUpdate();
        // },500)
    }
}
</script>
<style scoped>
.title {
    color: #1c1f2a;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 20px 0;
}

.label {
    color: #8d8d8d;
    margin-right: 15px;
    text-align: right;
}

.info {
    padding: 14px;
    font-size: 16px;

}
</style>